<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="mt-4 text-right">
        <el-button size="small" type="primary" @click="addClick">
          新增等级
        </el-button>

      </div>

      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        border
        class="mt-3"
        stripe
        style="width: 100%"
        tooltip-effect="dark"
      >
        <el-table-column label="等级" prop="level"></el-table-column>
        <el-table-column label="成长值" prop="score"></el-table-column>
        <el-table-column label="认证标识" prop="icon">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.icon"
              style="width: 100px; height: 100px">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="勋章" prop="special_icon">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.special_icon"
              style="width: 100px; height: 100px">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              plain
              size="mini"
              type="success"
              @click="editClick(scope.row)"
            >
              <i class="el-icon-edit-outline"></i>编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <cus-pagination
        v-show="listQuery.total > 0"
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="listQuery.total"
        @pagination="getTableData"
      />

      <el-dialog
        :title="title"
        :visible.sync="visibleAdd"
        width="30%"
        @close="closeDialog('newHeadlines')">
        <el-form ref="newHeadlines" :inline="false" :model="newHeadlinesForm" :rules="rules" label-width="120px"
                 size="normal">
          <el-form-item label="等级" prop="level">
            <el-input v-model.number="newHeadlinesForm.level"></el-input>
          </el-form-item>
          <el-form-item label="成长值" prop="score">
            <el-input v-model.number="newHeadlinesForm.score" type="number"></el-input>
          </el-form-item>
          <el-form-item label="认证标识" prop="icon">
            <el-upload
              :http-request="customizeUpload"
              :on-success="handleSuccessIcon"
              :show-file-list="false"
              action=""
              class="avatar-uploader"
            >
              <img v-if="newHeadlinesForm.icon"
                   :src="newHeadlinesForm.icon"
                   class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="勋章" prop="special_icon">
            <el-upload
              :http-request="customizeUpload"
              :on-success="handleSuccess"
              :show-file-list="false"
              action=""
              class="avatar-uploader"
            >
              <img v-if="newHeadlinesForm.special_icon"
                   :src="newHeadlinesForm.special_icon"
                   class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

        </el-form>

        <span slot="footer">
          <el-button @click="visibleAdd = false">返回</el-button>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>

import {LevelList, LevelListAdd, LevelListEdit} from "@/api/anchorManagement/anchorLevelSetting";

export default {
  name: "anchorInterviewSetting",
  components: {},
  data() {
    return {
      nowScore: '',
      title: '',
      visibleAdd: false,
      loading: false,
      giveAwayModal: {
        visible: false,
        detail: {}
      },
      addEditModal: {
        visible: false,
        status: "Add",
        detail: {}
      },
      statusOption: [
        {label: "在榜", value: 1},
        {label: "不在榜", value: 0}
      ],
      statusOption1: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      options: [],
      parentList: [],
      tableData: [],
      listQuery: {
        page: 1,
        perPage: 10,
        total: 10,
        user_code: undefined,
        nickname: undefined,
        is_in_list: undefined,
        is_admin: undefined,
        created_start_at: undefined,
        created_end_at: undefined
      },
      newHeadlinesForm: {
        "level": undefined, // 用户ID非code
        "score": "", // 内容
        "icon": undefined, // 热度
        "special_icon": undefined,
        "id": ''
      },
      rules: {
        level: [{required: true, message: '请输入等级  ', trigger: 'blur'}],
        score: [{required: true, message: '请输入成长值', trigger: 'blur'}],
        icon: [{required: true, message: '请上传认证标识', trigger: 'change'}],
        special_icon: [{required: true, message: '请上传特殊认证标识', trigger: 'change'}],
      },
      headlineStatus: '',
    };
  },
  created() {
    this.getTableData();
    // this.GetUserAccount()
  },
  methods: {
    // 点击事件
    /**
     * addClick
     * @desc 点击新增 按钮
     */
    addClick() {
      this.headlineStatus = "Add";
      this.title = '新增等级'
      this.visibleAdd = true;
    },
    /**
     * editClick
     * @desc 编辑按钮发生点击
     */
    editClick(detail) {
      this.headlineStatus = "Edit";
      this.title = '编辑等级'
      this.visibleAdd = true;
      this.newHeadlinesForm = detail
    },
    /**
     * delClick
     * @desc 点击删除按钮
     * @param row {}
     */
    async delClick(row) {
      this.$confirm("确定要将头条撤出榜单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const data = {
            id: row.id
          }
          const detail = await removeList(data);//
          if (detail.code === 200) {
            this.$message({type: "success", message: "删除成功!"});
            await this.getTableData();
          } else {
            this.$message({type: "error", message: detail.message});
          }
        })
        .catch(() => {
          this.$message({type: "info", message: "已取消删除"});
        });
    },
    /**
     * resetClick
     * @desc 重置按钮 点击事件
     */
    resetClick() {
      this.listQuery = {
        page: 1,
        perPage: 10,
        total: 1
      };
      this.getTableData();
    },
    // 新增等级
    onSubmit() {
      this.$refs['newHeadlines'].validate(valid => {
        if (valid) {

          if (this.headlineStatus === 'Edit') {
            const editData = {
              "level": undefined, // 用户ID非code
              "score": "", // 内容
              "icon": undefined, // 热度
              "special_icon": undefined,
              id: this.newHeadlinesForm.id
            }
            LevelListEdit(this.newHeadlinesForm).then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.getTableData()
                this.visibleAdd = false
              }
            })
          } else {

            LevelListAdd(this.newHeadlinesForm).then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.getTableData()
                this.visibleAdd = false
              }
            })
          }
        }
      })
    },

    // 网络请求
    /**
     * getTableData
     * @desc 获取表格数据
     */
    async getTableData() {

      this.loading = true;
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }
      const detail = await LevelList()
      if (detail.code === 200) {
        this.tableData = detail.data;
        // this.listQuery.page = detail.data.current_page;
        // this.listQuery.total = detail.data.total;
        // this.listQuery.perPage = detail.data.per_page;
        this.loading = false;
      }
    },
    handleSearch() {
      this.listQuery.page = 1;
      this.getTableData();
    },
    closeDialog(form) {
      if (this.$refs[form]) {
        this.$refs[form].clearValidate() // 清除整个表单的校验
        this.$refs[form].resetFields() // 清除整个表单的校验
      }
      this.headlineStatus = ''
      this.newHeadlinesForm = {
        "id": "",
        "level": undefined, // 用户ID非code
        "score": "", // 内容
        "icon": undefined, // 热度
        "special_icon": undefined
      },
        this.nowScore = '';
    },
    handleSuccess() {
      this.newHeadlinesForm.special_icon = this.ossLastImgUrl
    },
    handleSuccessIcon() {
      this.newHeadlinesForm.icon = this.ossLastImgUrl
    }
  }
};
</script>

<style lang="scss" scoped>
.avatar-uploader-icon {
  border      : 1px dashed #d9d9d9;
  font-size   : 28px;
  color       : #8c939d;
  width       : 100px;
  height      : 100px;
  line-height : 100px;
  text-align  : center;
}
</style>
